<!--
  @author:  long
  @date:    2024/5/28
  @file:    xx
  @require:
-->
<template>
  <div class="createProject">
    <el-dialog
      v-model="dialogTableVisible"
      title="新建项目"
      width="1000"
      destroy-on-close
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="template-img">
            <img src="@/assets/icons/svg/intro-scrum.svg" alt="" />
          </div>
          <div class="template-content">
            <p class="template-name">Scrum</p>
            <div class="template-desc">
              Scrum
              是一种增量迭代式的敏捷开发方法，帮助企业持续规划和交付业务价值。
            </div>
            <div class="template-tips">
              <div class="template-tip ng-star-inserted" style="">
                <el-icon color="#73d897" size="18">
                  <SuccessFilled />
                </el-icon>
                <span>通过 Epic / Feature / User Story 管理需求</span>
              </div>
              <!---->
              <div class="template-tip ng-star-inserted" style="">
                <el-icon color="#73d897" size="18">
                  <SuccessFilled />
                </el-icon>
                <span>轻松规划迭代，追踪回顾迭代开发</span>
              </div>
              <!---->
              <div class="template-tip ng-star-inserted" style="">
                <el-icon color="#73d897" size="18">
                  <SuccessFilled />
                </el-icon>
                <span>从产品角度定义并管理发布</span>
              </div>
              <!----><!---->
            </div>
          </div>
        </el-col>
        <el-divider direction="vertical"></el-divider>
        <el-col :span="11">
          <!--      步骤1  类型选择    -->
          <div class="step" v-show="stepValue == 1">
            <div>项目类型&nbsp;*</div>
            <div
              :class="[
                'project-type',
                { 'border-primary': projectType == type.type }
              ]"
              v-for="(type, index) in projectTypeItems"
              :key="index"
              @click="handleCheckType(type)"
            >
              <div class="project-type-container">
                <div class="type-icon">
                  <img :src="type.icon" alt="" />
                </div>
                <div class="project-type-content">
                  <div class="project-type-name">{{ type.name }}</div>
                  <div class="project-type-description">
                    {{ type.description }}
                  </div>
                  <!---->
                </div>
              </div>
              <div class="checked-icon" v-if="projectType == type.type">
                <el-icon color="#6698ff" size="18">
                  <SuccessFilled />
                </el-icon>
              </div>
            </div>
          </div>
          <!--       步骤2 表单   -->
          <div class="step" v-show="stepValue == 2">
            <el-form
              :rules="rules"
              style="padding: 0 10px"
              label-position="top"
              label-width="auto"
              :model="projectForm"
              ref="projectFormRef"
            >
              <el-form-item label="所属" required>
                <el-input v-model="projectForm.username" disabled />
              </el-form-item>
              <el-form-item label="项目名称" required prop="name">
                <el-input
                  v-model="projectForm.name"
                  maxlength="255"
                  placeholder="输入项目名称"
                  show-word-limit
                  type="text"
                >
                  <template #prefix>
                    <div
                      class="flex items-center justify-center pr-5px border-r-1"
                      style="border-right: 1px solid #eee; padding-right: 5px"
                    >
                      <img
                        :src="projectIcon"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="可见范围" required>
                <div class="rangeSelect">
                  <div class="range-title">
                    <el-icon color="#999" size="18">
                      <Unlock />
                    </el-icon>
                    <div class="range-title-content">公开</div>
                  </div>
                  <div class="range-description">
                    组织全部成员可见，仅加入的项目成员可编辑
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="项目标识" required prop="identification">
                <el-input
                  v-model="projectForm.identification"
                  maxlength="15"
                  placeholder="大写字母和数字，15个字符以内"
                  show-word-limit
                  type="text"
                />
              </el-form-item>
              <el-form-item label="描述">
                <el-input
                  v-model="projectForm.description"
                  :rows="3"
                  show-word-limit
                  maxlength="2000"
                  type="textarea"
                  placeholder="输入项目描述"
                />
              </el-form-item>
            </el-form>
          </div>
          <!--       步骤3 成员选择    -->
          <div class="step" v-show="stepValue == 3">
            <div class="flex items-center justify-between mb-10px">
              <span>成员</span>
              <el-button type="primary" link icon="Plus" @click="handleAddUser"
                >添加成员
              </el-button>
            </div>
            <el-table :data="projectUserList">
              <el-table-column label="姓名" prop="label"></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <el-button link v-if="stepValue == 1" @click="handleClose"
          >取消
        </el-button>
        <el-button link v-if="stepValue >= 2" @click="--stepValue"
          >上一步
        </el-button>
        <el-button type="primary" class="w35" @click="handleNextStep">
          {{ stepValue == 3 ? '确定' : '下一步' }}
        </el-button>
      </template>
    </el-dialog>
    <!-- 人员弹出框下拉框 -->
    <SelectDialog
      :dialog-param="dialogParam"
      @ok="selectDialogData"
      @close="
        val => {
          dialogParam.isDialog = false
        }
      "
    />
  </div>
</template>

<script setup name="CreateProject">
import scrumFill from '@/assets/icons/svg/scrumFill.svg'
import kanbanSquareFill from '@/assets/icons/svg/kanbanSquareFill.svg'
import ganttSquareFill from '@/assets/icons/svg/ganttSquareFill.svg'

import useUserStore from '@/store/modules/user'
import router from '@/router'
import { getCurrentInstance } from 'vue'
import { saveRepaymentProject } from '@/api/researchManage/projectManage'

const { proxy } = getCurrentInstance()
// 项目类型标题
const projectTypeItems = ref([
  {
    type: 'scrum',
    name: 'Scrum 项目',
    description: '增量迭代式的高效敏捷开发方法',
    icon: scrumFill
  }
  // {
  //   type: 'kanban',
  //   name: 'Kanban 项目',
  //   description: '拉动和可视化的轻量级敏捷开发方法',
  //   icon: kanbanSquareFill
  // },
  // {
  //   type: 'gantt',
  //   name: '瀑布项目',
  //   description: '规划工作并按序执行的项目开发模型',
  //   icon: ganttSquareFill
  // }
])
// 当前用户信息
const userStore = useUserStore()
// 选中的项目类型
const projectType = ref('scrum')
// 项目类型图标
const projectIcon = ref('')
const projectFormRef = ref(null)
const stepValue = ref(1)
const dialogParam = ref({})
// 项目成员列表
const projectUserList = ref([])
// 项目成员id
const projectUserIds = ref([])
// 新建项目的表单
const projectForm = ref({
  username: userStore.user.nickName,
  name: '',
  identification: '',
  description: ''
})

// 表单验证规则
const rules = ref({
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  identification: [
    { required: true, message: '请输入项目标识', trigger: 'blur' },
    //正则校验 英文字母/数字/下划线/连接线（不超过15字符）
    {
      pattern: /^[A-Z0-9_-]{1,15}$/,
      message: '大写英文字母/数字/下划线/连接线',
      trigger: 'blur'
    }
  ]
})

// 关闭弹窗
const handleClose = () => {
  dialogTableVisible.value = false
}

// 选择项目类型
const handleCheckType = type => {
  projectType.value = type.type
}

//添加项目成员
const handleAddUser = () => {
  dialogParam.value.type = 'projectIdArr'
  dialogParam.value.title = '请选择销售人员'
  dialogParam.value.isDialog = true
  dialogParam.value.multiple = true
  dialogParam.value.nodeKey = 'uuid'
  dialogParam.value.defaultCheckedKeys = projectUserIds.value
  dialogParam.value.dataType = 'person'
}

// 人员选择确定
const selectDialogData = val => {
  switch (val.type) {
    case 'projectIdArr':
      projectUserList.value = val.selectData
      projectUserIds.value = val.defaultCheckedKeys
      console.info('projectUserList.value', projectUserList.value)
      console.info(' projectUserIds.value', projectUserIds.value)
      break
  }
}
// 下一步
const handleNextStep = () => {
  switch (stepValue.value) {
    case 1:
      //通过projectType.value来获取选中的icon
      projectIcon.value = projectTypeItems.value.find(
        item => item.type == projectType.value
      ).icon
      stepValue.value = ++stepValue.value
      break
    case 2:
      //表单校验
      projectFormRef.value.validate(valid => {
        if (valid) {
          stepValue.value = ++stepValue.value
        } else {
          console.log('校验失败')
          return false
        }
      })

      break
    case 3:
      if (projectUserList.value.length == 0) {
        proxy.$modal.msgWarning('请选择项目成员')
        return
      }
      let obj = projectUserList.value.find(item => {
        return item.id == userStore.user.userId
      })
      if (!obj) {
        proxy.$modal.msgWarning('项目成员必须包含项目归属人')
        return
      }

      //触发保存接口
      let params = {
        type: projectType.value,
        userName: userStore.user.nickName,
        userId: userStore.user.userId,
        name: projectForm.value.name,
        identification: projectForm.value.identification,
        description: projectForm.value.description,
        memberIdArr: projectUserList.value.map(item => {
          return item.id
        }),
        membersArr: projectUserList.value.map(item => {
          return item.label
        })
      }
      saveRepaymentProject(params).then(res => {
        //确认
        router.push({
          path: '/researchManage/proDetails',
          query: {
            modal: 'backlog',
            projectId: res.data.id
          }
        })
      })

      break
    default:
      break
  }

  console.log('下一步', stepValue.value)
}

const dialogTableVisible = ref(false)
// 重置
const ready = () => {
  projectForm.value = {
    username: userStore.user.nickName,
    name: '',
    identification: '',
    description: ''
  }
  const uId = 'U' + userStore.user.userId
  projectUserIds.value = [uId]
  projectUserList.value = [
    {
      id: userStore.user.userId,
      label: userStore.user.nickName
    }
  ]
  stepValue.value = 1
  projectType.value = 'scrum'
}
// 打开弹窗
const handleOpen = () => {
  ready()
  dialogTableVisible.value = true
}

defineExpose({
  handleOpen
})
</script>

<style scoped lang="scss">
.createProject {
  .template-img {
    @apply mb20px p20px text-center  box-sizing-border-box;
    background: #fafafa;

    img {
      box-shadow: 0 0 30px -5px #ddd;
    }
  }

  .el-divider--vertical {
    height: auto;
  }

  .template-content {
    box-sizing: border-box;

    .template-name {
      margin-bottom: 5px;
      color: #333;
    }

    .template-desc {
      margin-bottom: 15px;
      color: #999;
    }

    .template-tip {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      color: #999;

      .el-icon {
        margin-right: 5px;
      }
    }
  }

  .project-type:hover {
    border-color: #6698ff;
  }

  .border-primary {
    background: #6698ff1a;
    color: #333;
    border: 1px solid #6698ff !important;
  }

  .project-type {
    position: relative;
    width: 100%;
    height: auto;
    box-shadow: 0 0.125rem 0.25rem #00000013;
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    cursor: pointer;

    .checked-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .project-type-container {
      @apply flex items-center w-full py-20px pl-20px pr-10px;
    }

    .type-icon {
      padding: 14px;
      background: #fafafa;

      border-radius: 2px;
      fill: currentColor;
      display: inline-block;

      img {
        width: 32px;
        height: 32px;
      }
    }

    .project-type-content {
      margin-left: 20px;

      .project-type-description {
        margin-top: 0.5rem;
        color: #999;
      }
    }
  }

  //   可见范围
  .rangeSelect {
    width: 100%;
    padding: 10px 20px;
    color: #333;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dcdfe6;
    border-radius: 0.25rem;

    .range-title {
      @apply flex items-center;
      .range-title-content {
        @apply flex items-center text-lg pt-2px pl-5px;
      }
    }

    .range-description {
      color: #aaa;
      font-size: 12px;
      line-height: 20px;
      padding-left: 25px;
    }
  }

  .rangeSelect:hover {
    border-color: #c0c4cc;
  }
}
</style>
